import { Modal } from 'ant-design-vue'
import { defineComponent, toRefs, unref } from 'vue'
import { basicProps } from '../props'
import { useModalDragMove } from '../hooks/useModalDrag'
import { useAttrs } from '/@/hooks/core/useAttrs'
import { extendSlots } from '/@/utils/helper/tsxHelper'
export default defineComponent({
  name: 'Modal',
  inheritAttrs: false,
  props: basicProps,
  emits: ['cancel'],
  setup(props, { slots, emit }) {
    const { visible, draggable, destroyOnClose } = toRefs(props)
    const attrs = useAttrs()
    useModalDragMove({
      visible,
      destroyOnClose,
      draggable,
    })
    const onCancel = (e: Event) => {
      emit('cancel', e)
    }

    return () => {
      const propsData = { ...unref(attrs), ...props, onCancel } as Recordable
      // Todo 这中方式写并没有绑定 有bug 估计是antdv3 与 antdv1.7.8 导致的问题
      // return <Modal {...propsData}>{extendSlots(slots)}</Modal>;
      return (
        <Modal
          width={propsData.width}
          visible={propsData.visible}
          height={props.height}
          afterClose={propsData.afterClose}
          cancelText={propsData.cancelText}
          centered={propsData.centered}
          closable={propsData.closable}
          closeIcon={propsData.closeIcon}
          confirmLoading={propsData.confirmLoading}
          destroyOnClose={propsData.destroyOnClose}
          forceRender={propsData.forceRender}
          mask={propsData.mask}
          maskClosable={propsData.maskClosable}
          maskStyle={propsData.maskStyle}
          okText={propsData.okText}
          okType={propsData.okType}
          title={propsData.title}
          wrapClassName={propsData.wrapClassName}
          zIndex={propsData.zIndex}
          dialogClass={propsData.dialogClass}
        >
          {extendSlots(slots)}
        </Modal>
      )
    }
  },
})
